<template>
  <div>
    <div>
      <div>侧边栏</div>
      <div class="left-panel">

      </div>
      <div class="right-panel">

      </div>
    </div>
    <el-container>
      <el-aside>
        <ul>
          <router-link v-for="panelItem in panelList" :to="{path:panelItem.path}" tag="li" active-class="active"
                       :key="panelItem.path">
            {{panelItem.name}}
          </router-link>
        </ul>
      </el-aside>
      <el-container>
        <el-header>

        </el-header>
        <el-main>
          <transition :duration="{ enter: 300, leave: 200 }" mode="out-in"
            enter-active-class="animated zoomIn"
                      leave-active-class="animated slideOutLeft">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </transition>
        </el-main>
        <el-footer>

        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'Main',
    data() {
      return {
        panelList: [
          {
            name: '创建计划',
            path: 'fir',
            active: false
          },
          {
            name: '终端筛选',
            path: 'sec',
            active: false
          }
        ]
      }
    }
  }
</script>

<style scoped>
  ul li {
    height: 20px;
  }

  .active {
    color: #ffffff;
    background: red;
  }
</style>
